import { produce } from 'immer'
import React, { useState } from 'react'
import type { ChangeEvent } from 'react'
const FormElementDemo: React.FC = () => {
  // const [textVal, setTextVal] = useState<string>('hello')
  // function handleChange(e: ChangeEvent<HTMLInputElement>) {
  // setTextVal(e.target.value)
  // }

  // const [gender, setGender] = useState<string>('female')
  // function handleChange(e: ChangeEvent<HTMLInputElement>) {
  // setGender(e.target.value)
  // }

  // const [checked, setChecked] = useState<boolean>(false)

  // const [selectedCityList, setSelectCityList] = useState<Array<string>>([])
  /* function handleCityChange(e: ChangeEvent<HTMLInputElement>) {
    const city = e.target.value
    if (selectedCityList.includes(city)) {
      setSelectCityList(
        produce(draft => {
          const idx = draft.findIndex(item => item === city)
          draft.splice(idx, 1)
        })
      )
    } else {
      setSelectCityList(
        produce(draft => {
          draft.push(city)
        })
      )
    }
  } */

  /* const [lang, setLang] = useState<string>('js')
  function handleChange(e: ChangeEvent<HTMLSelectElement>) {
    setLang(e.target.value)
  } */

  function handlerSubmit(e: ChangeEvent<HTMLFormElement>) {
    console.log(e)
    e.preventDefault()
  }
  return (
    <>
      <p>From Element Demo</p>
      {/* <input type="text" value={textVal} onChange={handleChange} /> */}
      {/* <textarea value={textVal} onChange={handleChange} />

      <p
        dangerouslySetInnerHTML={(() => {
          return { __html: textVal.replaceAll('\n', '<br>') }
        })()}
      ></p> */}
      {/* <label htmlFor="radio1">男</label>
      <input
        type="radio"
        id="radio1"
        name="gender"
        value="male"
        checked={gender === 'male'}
        onChange={handleChange}
      />
      <label htmlFor="radio2">女</label>
      <input
        type="radio"
        id="radio2"
        name="gender"
        value="female"
        checked={gender === 'female'}
        onChange={handleChange}
      />
      <button
        onClick={() => {
          console.log(gender)
        }}
      >
        打印
      </button> */}
      {/*  <label htmlFor="checkbox1">选中</label>
      <input type="checkbox" id="checkbox1" checked={checked} onChange={toggleChecked} /> */}
      {/* <label htmlFor="checkbox1">北京</label>
      <input
        type="checkbox"
        id="checkbox1"
        checked={selectedCityList.includes('beijing')}
        value="beijing"
        onChange={handleCityChange}
      />
      <label htmlFor="checkbox2">上海</label>
      <input
        type="checkbox"
        id="checkbox2"
        checked={selectedCityList.includes('shanghai')}
        value="shanghai"
        onChange={handleCityChange}
      />
      <label htmlFor="checkbox3">深圳</label>
      <input
        type="checkbox"
        id="checkbox3"
        checked={selectedCityList.includes('shenzhen')}
        value="shenzhen"
        onChange={handleCityChange}
      /> */}
      {/* <select value={lang} onChange={handleChange}>
        <option value="jave">java</option>
        <option value="js">js</option>
        <option value="css">css</option>
      </select> */}

      <div>
        <form action="/api/post" onSubmit={handlerSubmit}>
          <input type="text" name="k1" value="v1" />
          <br />
          <textarea name="k2" value="v2"></textarea>
          <br />
          <input type="hidden" name="k3" value="v3" />
          <button type="submit">提交</button>
        </form>
      </div>
    </>
  )
}

export default FormElementDemo
